<template>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <button @click="fn">btn</button>
  <p>str: {{ state.str }}</p>
  <input type="text" ref="ipt" />

  <Child :count="count" :obj="{ name: 'zhangsan', age: 20 }" />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch, provide } from "vue";
import Child from "./Child.vue";

interface Statetype {
  str: string;
}

// ref和computed的类型使用泛型
const count = ref<number>(3);
const doubleCount = computed<number>(() => count.value * 2);
const fn = (): void => {
  count.value++;
};

// reactive是使用interface来定义类型
const state: Statetype = reactive({
  str: "hello",
});

watch(count, (val: number, oldValue: number): void => {
  console.log("count改变了", val, oldValue);
});

// 可以使用ref来获取dom元素
// ref()执行是可以返回一个空的地址引用
const ipt = ref<HTMLInputElement | null>();
onMounted(() => {
  // ipt.value && ipt.value.focus();
  // 可选链操作符
  ipt.value?.focus();
});

// provide不需要添加类型
provide("name", "lisi");
</script>
